<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
  tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #couponForm="ngForm" name="CouponForm" novalidate (ngSubmit)="save()" autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span *ngIf="coupon?.id">{{l("EditNewCoupon")}}: {{coupon?.id+' | '+coupon?.title}}</span>
            <span *ngIf="!coupon.id">{{l("CreateNewCoupon")}}</span>
          </h4>
          <button type="button" class="close" (click)="close()" aria-label="Close">
            <i aria-hidden="true" class="ki ki-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-8">
              <div class="form-group">
                <label>{{l("CouponName")}} *</label>
                <input #nameInput="ngModel" class="form-control" type="text" name="title" [(ngModel)]="coupon.title"
                  required maxlength="32">
                <validation-messages [formCtrl]="nameInput"></validation-messages>
              </div>

              <div class="form-group" *ngIf="appSession.ouList&&!coupon.id">
                <label>{{l("OU")}}</label>
                <select [(ngModel)]="coupon.organizationUnitId" name="organizationUnitId" class="form-control">
                  <option value=""></option>
                  <option [value]="ou.value" *ngFor="let ou of appSession.ouList">{{ou.name}}</option>
                </select>
              </div>


              <div class="form-group">
                <label>{{l("couponAmount")}} *</label>
                <input #amountInput="ngModel" class="form-control" type="number" pattern="([0-9]*(\.[0-9]+)?|0)"
                  step="0.01" name="amount" [(ngModel)]="coupon.amount" maxlength="32">
                <validation-messages [formCtrl]="amountInput"></validation-messages>
              </div>
              <div class="form-group">
                <label>{{l("startEndTime")}}</label>
                <date-range-picker name="SampleDateRangePicker" needInitDate="true" [(startDate)]="coupon.start_time"
                  [(endDate)]="coupon.end_time" rangeMode="future" [allowFutureDate]="true">
                </date-range-picker>
              </div>
              <div class="form-group">
                <label>{{l("CouponUrl")}}*</label>
                <input #urlInput="ngModel" class="form-control" pattern="^(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$"
                  type="text" name="url" [(ngModel)]="coupon.url" required maxlength="500">
                <validation-messages [formCtrl]="urlInput"></validation-messages>
              </div>
            </div>
            <div class="col-4">
              <div class="form-group kt-form__group">
                <label class="control-label">{{l("Picture")}} *</label>
                <app-fileupload [fileUrl]="coupon.pictures" (onUpLoadEvent)="onUpload($event)" (onBeforeSendEvent)="onBeforeSend($event)"></app-fileupload>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-primary" (click)="close()">{{l("Cancel")}}</button>
          <button type="submit" *ngIf="coupon.isMine!==false" class="btn btn-primary blue" [disabled]="!couponForm.form.valid"
            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
        </div>
      </form>
    </div>
  </div>
</div>